<script setup lang="js">
</script>

<template>
    <div id="top-header">
        <img src="@/assets/imgs/topheader.png" alt="Top Header Image"/>
        <dv-decoration-7 style="font-family: YouYuan,sans-serif;;font-weight: bold;font-size: 35px;">中国新能源汽车市场选择与分析</dv-decoration-7>
    </div>
</template>

<style lang="css" scoped>
    #top-header {
        width: 100%;
        text-align: center;
        background-color: #1d236a; 
        height: 100px; 
        position: relative; 
        border-radius: 20px; 
        overflow: hidden; 
    }

    #top-header img {
        width: 100%; 
        height: 100%;
        object-fit: cover; 
        position: absolute; 
        top: 0;
        left: 0;
    }

    #top-header label {
        font-size: 35px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);
        color: white;
        font-family: "YouYuan", sans-serif;
        font-weight: bold;
    }
</style>
